<%@ include file="../common/top.jsp"%>


<link rel="stylesheet" href="css/cart.css">
<link rel="StyleSheet" href="css/cart.css" type="text/css" media="screen"/>
<script src="https://kit.fontawesome.com/ded7430fd5.js" crossorigin="anonymous"></script>

<div style="padding: 20px">

    <div class="Back">
        <a href="cartForm" class="BackLink">
            <i class="fa-solid fa-circle-left"></i>
            Return to Cart
        </a>
    </div>

    <div id="Catalog">

        <div id="Cart" style="padding-left: 200px">

            <h2><i class="fa-solid fa-list">Order</i></h2>

            <label id="shipToLabel"><input type="checkbox" id="shipToCheckbox" value="0"/>Ship to different address</label>

            <form action="updateCart" method="post">
                <div>
                    <table  class="tableCSS">
                        <tr>
                            <td>
                                <b>Name: </b>
                            </td>
                        <td>
                            <input type="text" name="${sessionScope.loginAccount.firstName} ${sessionScope.loginAccount.lastName}"
                                   value="${sessionScope.loginAccount.firstName} ${sessionScope.loginAccount.lastName}"
                                   width="250px">
                        </td>
                    </tr>
                        <tr>
                            <td>
                                <b>Address1: </b>
                            </td>
                            <td>
                                <input type="text" name="${sessionScope.loginAccount.country} ${sessionScope.loginAccount.state} ${sessionScope.loginAccount.city} ${sessionScope.loginAccount.address1}"
                                    value="${sessionScope.loginAccount.country} ${sessionScope.loginAccount.state} ${sessionScope.loginAccount.city} ${sessionScope.loginAccount.address1}"
                                    width="250px">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Address2: </b>
                            </td>
                            <td>
                                <input type="text" name="${sessionScope.loginAccountu.country} ${sessionScope.loginAccount.state} ${sessionScope.loginAccount.city} ${sessionScope.loginAccont.address2}"
                                    value="${sessionScope.loginAccount.country} ${sessionScope.loginAccount.state} ${sessionScope.loginAccount.city} ${sessionScope.loginAccount.address2}"
                                    width="250px">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Email: </b>
                            </td>
                            <td>
                                <input type="text" name="${sessionScope.loginAccount.email}" value="${sessionScope.loginAccount.email}" width="250px">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Phone Number: </b>
                            </td>
                            <td>
                                <input type="text" name="${sessionScope.loginAccount.phone}" value="${sessionScope.loginAccount.phone}" width="250px">
                            </td>
                        </tr>
                </table>
                </div>

                <div id="orderInfo" style="padding-top: 30px">

                </div>

                <script>
                    jQuery(function (){
                        jQuery('#shipToLabel').on('click', function (){
                            jQuery.noConflict();
                            var $checkbox   =jQuery('#shipToCheckbox'),
                                status      =$checkbox.prop("checked"),
                                shipping    =document.getElementById("orderInfo");
                            console.log(status);
                            if(status){
                                shipping.innerHTML=
                                    "<table class='tableCSS'>\n" +
                                    "\t<tr>\n" +
                                    "\t\t<th colspan=2 style='text-align:left'><b>Shipping Address</b></th>\n" +
                                    "\t</tr>\n" +
                                    "\t<tr>\n" +
                                    "\t\t<td>Name:</td>\n" +
                                    "\t\t<td>\n" +
                                    "\t\t\t<input type=\"text\" name=\"${sessionScope.loginAccount.firstName} ${sessionScope.loginAccount.lastName}\" value=\"${sessionScope.loginAccount.firstName} ${sessionScope.loginAccount.lastName}\"/>\n" +
                                    "\t\t</td>\n" +
                                    "\t</tr>\n" +
                                    "\t<tr>\n" +
                                    "\t\t<td>Address1:</td>\n" +
                                    "\t\t<td>\n" +
                                    "\t\t\t<input type=\"text\" name=\"${sessionScope.loginAccount.country} ${sessionScope.loginAccount.state} ${sessionScope.loginAccount.city} ${sessionScope.loginAccount.address1}\" value=\"${sessionScope.loginAccount.country} ${sessionScope.loginAccount.state} ${sessionScope.loginAccount.city} ${sessionScope.loginAccount.address1}\"/>\n" +
                                    "\t\t</td>\n" +
                                    "\t</tr>\n" +
                                    "\t<tr>\n" +
                                    "\t\t<td>Address2:</td>\n" +
                                    "\t\t<td>\n" +
                                    "\t\t\t<input type=\"text\" name=\"${sessionScope.loginAccount.country} ${sessionScope.loginAccount.state} ${sessionScope.loginAccount.city} ${sessionScope.loginAccount.address2}\" value=\"${sessionScope.loginAccount.country} ${sessionScope.loginAccount.state} ${sessionScope.loginAccount.city} ${sessionScope.loginAccount.address2}\"/>\n" +
                                    "\t\t</td>\n" +
                                    "\t</tr>\n" +
                                    "\t<tr>\n" +
                                    "\t\t<td>Email</td>\n" +
                                    "\t\t<td>\n" +
                                    "\t\t\t<input type=\"text\" name=\"${sessionScope.loginAccount.email}\" value=\"${sessionScope.loginAccount.email}\"/>\n" +
                                    "\t\t</td>\n" +
                                    "\t</tr>\n" +
                                    "\t<tr>\n" +
                                    "\t\t<td>Phone Number:</td>\n" +
                                    "\t\t<td>\n" +
                                    "\t\t\t<input type=\"text\" name=\"${sessionScope.loginAccount.phone}\" value=\"${sessionScope.loginAccount.phone}\"/>\n" +
                                    "\t\t</td>\n" +
                                    "\t</tr>\n" +
                                    "</table>"
                            }else {
                                shipping.innerHTML=null;
                            }
                        })
                    });
                </script>

                <p style="width: 200px;height: 40px;text-align: center;vertical-align: center;font-size: 20px"><b>Product List:</b></p>

                <table class="product-top-table">
                    <tr>
                        <th class="cell-img">Images</th>
                        <th class="cell-desp">Description</th>
                        <th class="cell-quantity">Quantity</th>
                        <th class="cell-listprice">List Price</th>
                        <th class="cell-totalprice">Total Cost</th>
                    </tr>
                </table>

                <table class="product-table" id="product-table">
                    <c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
                        <tr>
                            <td class="cell-img">
                                <div class="checkbox">
                                    <a href="itemForm?itemId=${cartItem.item.itemId}" >
                                            ${cartItem.item.product.description.substring(0,cartItem.item.product.description.indexOf(">"))} class="product-img">
                                    </a>
                                </div>

                            </td>
                            <td class="cell-desp">${cartItem.item.attribute1} ${cartItem.item.attribute2}
                                    ${cartItem.item.attribute3} ${cartItem.item.attribute4}
                                    ${cartItem.item.attribute5} ${cartItem.item.product.name}</td>
                            <td class="cell-quantity">
                                <span>
                                    <div>Quantity: ${cartItem.quantity}</div>
                                </span>
                            </td>
                            <td  class="cell-listprice"><fmt:formatNumber value="${cartItem.item.listPrice}"
                                                                          pattern="$#,##0.00" /></td>
                            <td id="${cartItem.item.itemId}" class="cell-totalprice"><fmt:formatNumber value="${cartItem.total}" pattern="$#,##0.00" /></td>
                        </tr>
                    </c:forEach>
                </table>

                <div style="margin: 10px;padding: 30px" >
                    <div style="display: flex">
                        <table>
                            <tr>
                                <td>
                                    <div style="padding-right: 10px;font-size: 20px;margin: 10px;text-align: center;width: 250px">Sub Total: <fmt:formatNumber value="${sessionScope.cart.subTotal}" pattern="$#,##0.00" /></div>
                                </td>
                                <td>
                                    <div><input type="submit" value="Update Order"></div>
                                </td>
                            </tr>
                        </table>


                    </div>
                    <c:if test="${sessionScope.cart.numberOfItems > 0}">
                        <div style="background-color: #F1A449;margin: 10px;border-radius: 10px;width: 200px;text-align: center" >
                            <a href="newOrder" class="Button" onclick="massage()"><i class="fa-solid fa-sack-dollar"></i>Pay for your Order</a>
                            <script language="JavaScript">
                                function massage(){
                                    alert("Paid Successfully");
                                }
                            </script>
                        </div>
                    </c:if>
                </div>

            </form>
        </div>

        <div id="Separator">&nbsp;</div>
    </div>
</div>

<%@ include file="../common/bottom.jsp"%>